<!-- MenuTree.vue -->
<template>
  <!-- 单个根元素包裹 -->

  <!-- 菜单项 -->
  <el-menu-item
    v-if="!item.children?.length"
    :index="item.id"
    @click="() => $emit('menu-click', item)"
  >
    <template #title>
      <el-icon v-if="item.meta?.icon">
        <component :is="item.meta.icon" />
      </el-icon>
      <span class="text-primary">{{ item.title }}</span>
    </template>
  </el-menu-item>

  <!-- 子菜单 -->
  <el-sub-menu v-else :index="item.id" class="">
    <template #title>
      <el-icon v-if="item.meta?.icon">
        <component :is="item.meta.icon" />
      </el-icon>
      <span>{{ item.title }}</span>
    </template>
    <menu-tree
      v-for="child in item.children"
      :key="child.id"
      :item="child"
      @menu-click="$emit('menu-click', $event)"
    />
  </el-sub-menu>
</template>

<script setup lang="ts">
defineProps({
  item: {
    type: Object,
    required: true,
  },
});

// 明确声明自定义事件
defineEmits(["menu-click"]);
</script>
<style lang="scss" scoped>
$--el-menu-item-height: 42.5px;
$--el-menu-sub-item-height: 42.5px;
:deep(.el-sub-menu__title) {
  border-radius: 5px;
  margin-bottom: 1.5px;
  height: $--el-menu-sub-item-height !important;
  line-height: $--el-menu-sub-item-height !important;
}
.el-menu-item {
  @apply mb-1.5 border-rounded;
  border-radius: 5px;
  margin-bottom: 1.5px;
  height: $--el-menu-sub-item-height !important;
  line-height: $--el-menu-sub-item-height !important;
}
.el-menu-item.is-active {
  // background-color: var(--bg-active-color);
  i {
    color: var(--text-color-primary);
  }
}
</style>
